<template>
  <a-card>
    <a-descriptions title="基础信息" v-if="profile">
      <a-descriptions-item :label="t('用户名')">
        {{ profile.user.nickName }}
      </a-descriptions-item>
      <a-descriptions-item :label="t('电话')">{{ profile.user.telephone }}</a-descriptions-item>
      <a-descriptions-item :label="t('平台')">{{ profile.user.platform }}</a-descriptions-item>
      <a-descriptions-item :label="t('语言')">{{ profile.user.lang }}</a-descriptions-item>
      <a-descriptions-item :label="t('门店编号')">{{ profile.user.storeNo }}</a-descriptions-item>
      <a-descriptions-item :label="t('身份')">{{ profile.roleGroup }}</a-descriptions-item>
      <a-descriptions-item :label="t('邮箱')">{{ profile.user.email }}</a-descriptions-item>
      <a-descriptions-item label="oss">{{ profile.oss }}</a-descriptions-item>
    </a-descriptions>
    <a-empty v-else></a-empty>
    <a-divider />
    <h1 class="text-[1.4rem] font-bold mb-8">修改信息</h1>

    <a-form
      v-if="profile"
      layout="vertical"
      :model="profile.user"
      @finish="submit"
      :wrapper-col="{
        span: 6,
      }"
    >
      <a-form-item :label="t('头像')" name="email">
        <a-avatar :size="42" v-model:value="profile.user.avatar"></a-avatar>
      </a-form-item>

      <a-form-item :label="t('昵称')" name="nickName">
        <a-input v-model:value="profile.user.nickName"></a-input>
      </a-form-item>

      <a-form-item :label="t('邮箱')" name="email">
        <a-input v-model:value="profile.user.email"></a-input>
      </a-form-item>

      <a-form-item :label="t('手机号码')" name="telephone">
        <a-input v-model:value="profile.user.telephone"></a-input>
      </a-form-item>

      <a-button htmlType="submit" type="primary">{{ t('保存') }}</a-button>
    </a-form>
  </a-card>
</template>

<script setup lang="ts">
import type { AccountInfo } from '@/api/modules/user/types';
import { getUserProfile, updateUserProfile } from '@/api/modules/user/user';
import { notify } from '@/utils/common/common';

const { t } = useI18n();
const profile = ref<AccountInfo>();
const getData = async () => {
  const { data } = await getUserProfile();
  profile.value = data.data;
};
const submit = async () => {
  if (profile.value?.user) {
    const { data } = await updateUserProfile(profile.value?.user);
    notify(data);
  }
};
onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped></style>
